<template>
	<view class="uni-padding-wrap">
		<!-- <view class="header">
			<view class="headerb">
				<swiper class="swiper" :indicator-dots='".swiper-pagination"==null?false:true' :autoplay='autoplaySwiper' :circular='true' indicator-active-color='rgba(255, 0, 0, 1)' indicator-color='rgba(0, 0, 0, 0.3)' :duration='1000' :interval='intervalSwiper' :vertical='"vertical"=="horizontal"?false:true'>
					<swiper-item v-for="(swiper,index) in swiperList" :key="index" @tap="onSwiperTap(swiper)">
						<image mode="aspectFill" :src="swiper.img"></image>
					</swiper-item>
				</swiper>
			</view>
		</view> -->
		<view class="pl15 col3 header-title" style="padding: 0 20rpx;" :style='{"background":"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
					  "borderRadius":"12rpx","color":"#fff","fontSize":"36rpx",
					  "lineHeight":"80rpx","margin":"20rpx","boxShadow":"0 4rpx 12rpx rgba(118, 75, 162, 0.2)"}'>
			<view class="left" :style="{fontSize:'36rpx',color:'#fff', fontWeight: '600'}">
				<uni-icons type="shop" size="22" color="#fff"></uni-icons>
				商品信息
			</view>
			<!-- <view class="right-content" @tap="onPageTap('shangpinxinxi')"
				:style="{fontSize:'32rpx',color:'#fff', borderBottom:'2rpx solid #fff'}">
				查看更多 >
			</view> -->
		</view>

		<view v-if='1 == 1' class="uni-product-list" :style='{"backgroundColor":"#f8f9ff","padding":"20rpx"}'>
			<view @tap="onDetailTap('shangpinxinxi',product.id)" :style='{"borderRadius":"20rpx","backgroundColor":"#fff",
						  "boxShadow":"0 8rpx 24rpx rgba(102, 126, 234, 0.1)","marginBottom":"24rpx",
						  "transition":"all 0.3s ease"}' class="uni-product" v-for="(product,index) in homeshangpinxinxilist"
				:key="index">
				<view class="image-view" :style='{"borderRadius":"20rpx 20rpx 0 0","height":"320rpx",
							  "position":"relative","overflow":"hidden"}'>
					<image :style='{"height":"100%","transition":"all 0.3s"}' mode="aspectFill"
						class="uni-product-image" :src="`${_imgUrl}${product.tupian?product.tupian.split(',')[0]:''}`">
					</image>
					<view class="image-overlay" :style='{"background":"linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%)",
								  "position":"absolute","bottom":"0","width":"100%","padding":"20rpx"}'>
						<view :style='{"fontSize":"32rpx","color":"#fff","textShadow":"0 2rpx 4rpx rgba(0,0,0,0.3)"}'
							class="uni-product-title">{{product.shangpinmingcheng}}</view>
					</view>
				</view>
				<!-- 可以在此处添加价格等其他信息 -->
			</view>
		</view>
	</view>
</template>

<script>
	import '@/assets/css/global-restaurant.css'
	import uniIcons from "@/components/uni-ui/lib/uni-icons/uni-icons.vue"
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				autoplaySwiper: {
					"delay": 5000,
					"disableOnInteraction": false
				} ? true : false,
				intervalSwiper: {
					"delay": 5000,
					"disableOnInteraction": false
				} ? 5000 : 5000,
				//轮播
				swiperList: [],
				homeshangpinxinxilist: [],
				news: [],
				_imgUrl: ''
			}
		},
		async onShow() {
			const curPages = getCurrentPages()[0]; // 获取当前页面实例
			if (typeof curPages.getTabBar === "function" && curPages.getTabBar()) {
			  curPages.getTabBar().setData({
			    selected: 0,
			  });
			}
			console.log('onShow', uni.getStorageSync('userInfo'));
			
			this._imgUrl = this.$base.url
			this.getUserInfo()
			// 轮播图
			// let swiperList = []
			// let res = await this.$api.page('config', {
			// 	page: 1,
			// 	limit: 5
			// });
			// for (let item of res.data.list) {
			// 	if (item.name.indexOf('picture') >= 0 && item.value && item.value != "" && item.value != null) {
			// 		swiperList.push({
			// 			img: item.value
			// 		});
			// 	}
			// }
			// if (swiperList) {
			// 	this.swiperList = swiperList;
			// }
			let res = await this.$api.list('shangpinxinxi', {
				// page: 1,
				// limit: 4
			});

			if (res.code == 200) {
				this.homeshangpinxinxilist = res.rows
			}
		},

		methods: {
			//轮播图跳转
			onSwiperTap(e) {

			},
			async getUserInfo() {
				try {
					let res = await this.$api.info('user', uni.getStorageSync('userInfo').userId);
					if (res.code == 200) {
						uni.setStorageSync("userInfo", res.data);
					}
				} catch (error) {
					//TODO handle the exception
				}
			},
			// 新闻详情
			onNewsDetailTap(id) {
				this.$utils.jump(`../news-detail/news-detail?id=${id}`)
			},
			// 推荐列表点击详情
			onDetailTap(tableName, id) {
				this.$utils.jump(`../${tableName}/detail?id=${id}`)
			},
			onPageTap(tableName) {

				uni.navigateTo({
					url: `../${tableName}/list`,
					fail: function() {
						uni.switchTab({
							url: `../${tableName}/list`
						});
					}
				});
				// this.$utils.jump(`../${tableName}/list`)
			}
		}
	}
</script>

<style>
	page {
		background: #F8F8F8;
	}

	.uni-padding-wrap:after {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		content: '';
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
	}

	view {
		font-family: '\5FAE\8F6F\96C5\9ED1';
		font-size: 30upx;
	}

	.header {
		background: #EEEEEE;
		padding: 0 0 300upx 0;
		margin-bottom: 20upx;
		position: relative;
	}

	.ssbox {
		background: rgba(255, 255, 255, 0.35);
		width: 530upx;
		border-radius: 60rpx;
		padding: 10upx 15upx;
		box-sizing: border-box;
	}

	.ss_input {
		border: none;
		width: 450upx;
		font-size: 30upx;
		color: #fff;
		background: none;
		height: 45upx;
		line-break: 45upx;
	}

	.headerb {
		position: absolute;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.headerb image {
		width: 100%;
		position: relative;
		z-index: 10;
	}

	.headerb .swiper {
		height: 300upx;
	}

	.swiper /deep/ .uni-swiper-dot {
		width: 16rpx;
		height: 16rpx;
		broder-radius: 50%;
	}


	.notice {
		position: relative;
		z-index: 5;
		padding: 0 50upx;
	}

	.noticem {
		background: #fff;
		padding: 55upx 30upx 15upx;
		border-radius: 10upx;
		margin-top: -45upx;
	}

	.noticer {
		width: 480upx;
		height: 50upx;
	}

	.noticer .swiper-item {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		height: 50upx;
		line-height: 50upx;
		font-size: 24upx;
	}

	.list {
		padding: 20upx 20upx 20upx;
	}

	.listm {
		background: #fff;
		border-radius: 15upx;
		box-shadow: 0 0 2upx rgba(0, 0, 0, 0.1);
		margin-bottom: 20upx;
		padding: 30upx;
	}

	.listmpic {
		border-radius: 10upx;
		width: 166upx;
		margin-right: 20upx;
	}

	.listmr {
		width: 460upx;
		display: inline-block;
		flex: 1;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	/* #ifdef MP-WEIXIN */
	.noticer .swiper-item {
		margin-top: 5upx;
	}

	/* #endif */
	/* #ifdef MP-BAIDU */
	.noticer .swiper-item {
		margin-top: 3upx;
	}

	/* #endif */
	/* #ifdef MP-ALIPAY */
	.noticer .swiper-item {
		margin-top: 2upx;
	}

	/* #endif */
	/* #ifdef MP-QQ */
	.noticer .swiper-item {
		margin-top: 4upx;
	}

	/* #endif */
	/* #ifdef MP-TOUTIAO */
	.noticer .swiper-item {
		margin-top: 4upx;
	}

	/* #endif */

	.uni-product-list {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
		margin-top: 0;
		padding: 0 14upx;
		box-sizing: border-box;
	}

	.uni-product-list.active {
		padding: 0 12upx;
	}

	.uni-product {
		padding: 10upx;
		margin: 10upx;
		width: 341upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
	}

	.uni-product-list.active .uni-product {
		width: 222upx;
	}

	.image-view {
		height: 321upx;
		width: 321upx;
		margin: 12upx 0;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.uni-product-list.active .image-view {
		height: 202upx;
		width: 202upx;
		overflow: hidden;
	}

	.uni-product-image {
		height: 100%;
		width: 100%;
		margin: 0 auto;
		display: block;
	}

	.uni-product-title {
		width: 100%;
		word-break: break-all;
		display: -webkit-box;
		overflow: hidden;
		line-height: 1.5;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.uni-product-price {
		width: 100%;
		margin-top: 10upx;
		font-size: 28upx;
		line-height: 1.5;
		position: relative;
	}

	.uni-product-price-original {
		color: #e80080;
	}

	.uni-product-price-favour {
		color: #888888;
		text-decoration: line-through;
		margin-left: 10upx;
	}

	.uni-product-tip {
		position: absolute;
		right: 10upx;
		background-color: #ff3333;
		color: #ffffff;
		padding: 0 10upx;
		border-radius: 5upx;
	}

	.header-title {
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: space-between;
		padding: 0 40upx;
	}
</style>
<style>
	page {
		background: linear-gradient(15deg, #f8f9ff 0%, #f1f3fe 100%);
	}

	/* 新增动画效果 */
	.uni-product {
		transition: transform 0.3s ease;
	}

	.uni-product:active {
		transform: translateY(-4rpx);
	}

	.header-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx !important;
		height: 100rpx;
	}

	.uni-product-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24rpx;
		padding: 0 20rpx !important;
	}

	.image-view {
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.image-view::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(118, 75, 162, 0.1);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.uni-product:hover .image-view::after {
		opacity: 1;
	}

	.right-content {
		display: flex;
		align-items: center;
		padding: 8rpx 16rpx;
		border-radius: 40rpx;
		transition: all 0.3s ease;
	}

	.right-content:active {
		background: rgba(255, 255, 255, 0.2);
	}
</style>